/** @file HorBtnText.qml
@brief The Qt-Complex button + text label object with horizontal disposition

This object aims to manage a simplified mechanism where a button can
open a secondary window (or it can be associated to any event) and the resulting
value is shown in the associated text field.
Optionally the text field can be used as input text if the \e flag property of the Loader
is set to true.

@authorname \n
@licenseversion \n
@actualversion - @dateupdate

@licensenote
*/
import QtQuick 1.0
import "Theme.js" as JsObj

Item {
    id: horizontalbuttoninput
    width: objLoad.getWidth(); height: objLoad.getHeight()
    signal objClicked

    Row {
        id: inputObjects
        width: parent.width; height: parent.height
        spacing: objLoad.getFieldSpacing();
        // Element 1 - The button
        BorderImage {
            id: button

            width: Math.round(objLoad.getWidth() * objLoad.getElementFactor());
            height: parent.height; source: JsObj.getButton(objLoad.getTheme()); clip: true
            border { left: 10; top: 10; right: 10; bottom: 10 }
            // Shade is set over the button image when it is presed
            Rectangle { id: shade; anchors.fill: button; radius: 5; color: "black"; opacity: 0 }
            // Font Size is set based on the button shorter side
            Text {
                id: buttonText
                anchors.centerIn: parent; font.pointSize: objLoad.getFontPoints() - 2;
                text: objLoad.getString();
                color: "black"; smooth: true
            }
            MouseArea {
                id: mouseArea
                anchors.fill: parent
                onClicked: { horizontalbuttoninput.objClicked(); }
            }
            // When button is pressed the shade changes
            states: State {
                name: "pressed"; when: mouseArea.pressed == true
                PropertyChanges { target: shade; opacity: .2 }
            }
        }
        // Element 2 (alternate) Text input field. The text input field is identical to the
        // text field and its visibility depends on the Flag status
        FocusScope {
            id: focusScope

            property int bordersize: 5
            width: parent.width
                   - Math.round(objLoad.getWidth() * objLoad.getElementFactor())
                   - (objLoad.getFieldSpacing() * 2)
            height: parent.height

            // Text area background border. The selected background depends on the flag status.
            BorderImage {
                id: backInputtext
                visible: objLoad.getFlag()
                source: JsObj.getLineEditBg(objLoad.getTheme());
                width: parent.width; height: parent.height
                border { left: focusScope.bordersize; top: focusScope.bordersize;
                    right: focusScope.bordersize; bottom: focusScope.bordersize }
            }
            BorderImage {
                id: backTextOnly
                visible: !objLoad.getFlag()
                source: JsObj.getLineEditBgMask(objLoad.getTheme());
                width: parent.width; height: parent.height
                border { left: focusScope.bordersize; top: focusScope.bordersize;
                    right: focusScope.bordersize; bottom: focusScope.bordersize }
            }

            // Text area backgrond when focused
            BorderImage {
                source: JsObj.getLineEditBgFocus(objLoad.getTheme());
                width: parent.width; height: parent.height
                border { left: focusScope.bordersize; top: focusScope.bordersize;
                    right: focusScope.bordersize; bottom: focusScope.bordersize }
                visible: parent.activeFocus ? true : false
            }

            // Manage focus acquisition when user select the field.
            // When focus is acquired, the virtual keyboard is shown to manage characters input
            // If input flag is disabled the mousearea is not visible
            MouseArea {
                visible: objLoad.getFlag()
                anchors.fill: parent
                onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel(); }
            }

            // Text input field. Visible only if flag is set.
            TextInput {
                id: textInput
                visible: objLoad.getFlag()
                font.pointSize: objLoad.getFontPoints();
                anchors {
                    left: parent.left; leftMargin: focusScope.bordersize * 2
                    right: clear.left; rightMargin: focusScope.bordersize * 2
                    verticalCenter: parent.verticalCenter
                }
                focus: true
                selectByMouse: true
            }

            // Text only field. Visible only if flag is false.
            Text {
                id: textOnly
                visible: objLoad.getFlag()
                font.pointSize: objLoad.getFontPoints();
                anchors {
                    left: parent.left; leftMargin: focusScope.bordersize * 2
                    right: clear.left; rightMargin: focusScope.bordersize * 2
                    verticalCenter: parent.verticalCenter
                }
            }

            // Clear icon image to the right of text area.
            // Mouse click on this area clears the text field and
            // opes the virtual keyboard
            Image {
                id: clear
                visible: objLoad.getFlag()
                width: focusScope.height; height: focusScope.height
                anchors { right: parent.right;
                    rightMargin: focusScope.bordersize * 2
                    verticalCenter: parent.verticalCenter
                }
                source: JsObj.getClearIcon(objLoad.getTheme());
                opacity: 0

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        textInput.text = ''; focusScope.focus = true;
                        textInput.openSoftwareInputPanel();
                    }
                }
            }

            // State changes management
            states: State {
                name: "hasText"; when: textInput.text != ''
                PropertyChanges { target: typeSomething; opacity: 0 }
                PropertyChanges { target: clear; opacity: 1 }
            }

            // Manage state changes transitions
            transitions: [
                Transition {
                    from: ""; to: "hasText"
                    NumberAnimation { exclude: typeSomething; properties: "opacity" }
                },
                Transition {
                    from: "hasText"; to: ""
                    NumberAnimation { properties: "opacity" }
                }
            ]
        }
    }
}
